Introduction

In this exercise, you will practice working with SwiftUI by creating a user profile page. You will use elements like Text , Image and Button to compose a user information page that will include a title and some user details to display the overall information about the user.

Scenario

The Little Lemon restaurant needs a page to display a user’s personal information, and you were tasked with creating such a page using SwiftUI.

Instructions

Before you begin make sure you have the latest version of XCode. Use the same project that you used in previous exercises in this lesson.

Step 1: Create a new SwiftUI file for onboarding.

Open up the XCode project. Select File > New > File , and choose the SwiftUI View file under the iOS tab and User Interface section. Then press Next .
Name the file UserProfile and press Create .

You should now have a file in your project file tree named UserProfile.

Step 3: Add another tab item on the home screen for the profile page

Follow the steps below to add another bottom tab bar item button to access the profile page:

Open the Home file that holds the tab bar with a single item referencing the Menu screen.
In the same way, add another item below the menu, that will initialize the UserProfile view and call the tabItem
Inside the tabItem , set the name of the Label as "Profile" and set the systemImage as the "square.and.pencil"

If you are having trouble implementing any of the steps above, review the following resource from the "Create the User Interface in SwiftUI" course:

Tabbed navigation

Step 2: Add a vertical stack and title to your profile page

Open the newly created UserProfile file. You will notice some default view code generated for you that outputs to screen “ Hello, World! ” in a Text view.

Complete the following tasks to modify it:

Remove the Text view code that has the “ Hello, World! ” text inside it.
In its place, put a VStack view.
Inside the VStack , put a new Text view with the text “ Personal information ”.

Save the code and you should have the text “ Personal information ” appear at the center of the screen.

If you are having trouble implementing any of the steps above, review the following resources from the "Create the User Interface in SwiftUI" course:

Step 3: Add an image to hold the profile picture

In this step you'll add the profile image by completing the following:

Add a new profile picture placeholder to the Assets catalog and name it profile-image-placeholder .
After the Text view inside the VStack , add a new Image view. Pass it a profile-image-placeholder name as a string to load the image from the assets.

You should now have text at the center of the screen, followed by the profile image below it with a placeholder loaded.

If you're having trouble with any of the steps above, review the following resource from the "Create the User Interface in SwiftUI" course:

Adding images and system images

Step 4: Add three text elements to hold user information from user defaults

Add three text fields below the image inside the VStack content to hold the first name, last name and email information that the user entered during the registration and was saved in UserDefaults :

Before the body variable, create a constant to hold the first name string value and initialize it by accessing the standard property of UserDefaults and calling string method on it. Use the key for the first name defined at the top of the Onboarding file.
Create two more constants for the rest of the data - last name and email in the same way. You should end up with three constants initialized with the data from UserDefaults .
Inside the VStack below the Image , add three Text elements one after another and pass in the three constants defined in the previous step that holds the first name, last name and email values.

You should now have three Text elements referencing constants declared above them that hold the values from the UserDefaults .

Tip: The string method of the UserDefaults returns an Optional value, so when setting the constants to the Text elements, you will need to unwrap them first, for instance, optionalStringConstant ?? "" .

If you're having trouble with any of the steps above, review the following resource from the "Create the User Interface in SwiftUI" course:

Text and TextField

Step 5: Add a button to logout

Use Button and the steps below to create logout logic:

Below the three text fields, add a Button element and initialize it with the text "Logout"
Add a trailing empty closure that will perform the logout action.
Above the body variable, add the following code @Environment(\.presentationMode) var presentation . This will automatically reference the presentation environment in SwiftUI which will allow you to reach the navigation logic.
Open the Onboarding file, and add another constant at the top of the file near the other 3 registration constants to store the login status, for example let kIsLoggedIn = "kIsLoggedIn"
Below, inside the register button closure, inside the if statement add another call to the UserDefaults and set true for the constant key defined in the previous step. This will store a flag that user is already logged in and should not see the Onboarding screen again the next time app launches.
At the end of the VStack , the first view inside the NavigationView call an onAppear method with a trailing closure. Inside the closure, add an if check, and access the standard property of the UserDefaults , and call a bool method with a logged in key that you defined at the top of the file in the previous step. This will check if the key is set to true .
Inside the if block, if user is logged in already - set the isLoggedIn local variable to true .
Open the UserProfile file again, and inside the logout button trailing closure first access the standard property of the UserDefaults and set false value using the login constant as a key that you defined at the top of the Onboarding file. Then on the following line add the following code self.presentation.wrappedValue.dismiss() . When executed, it will automatically tell the NavigationView to go back to the previous screen which is Onboarding simulating logout.
To make all the items start from the top instead of the center of the screen - add a Spacer element right after the logout button and initialize it.
You can now try to run the app, register and when you reach the home screen start the app again. It should skip the registration and take you straight to the home screen. Then you can go to the profile screen and press a logout button. Next time you will start app again, it should present you with an onboarding screen instead of the home.

If you're having trouble with any of the steps above, review the following resource from the "Create the User Interface in SwiftUI" course:

Step 6: Test the features you've created

Run the app, log in and you should see two tab bars instead of one on the home screen.
Select the second tab. It should take you to the Profile screen where you should see all the user details entered when registering.
Press logout. You should be taken back to the Onboarding registration screen.

To style your views in a more advanced way you can refer to the contents covered in the Create the User Interface with SwiftUI course, as well as view the following documentation:

Conclusion

This concludes setting up the profile page. In this exercise, you have practiced working with SwiftUI to create a user profile page for Little Lemon.